<html>
	<header>
	
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	 
	<script src="https://minedata.cn/minemapapi/v1.4/minemap.js"></script>
	<link ref='http://minedata.cn/minemapapi/v1.4/minemap.css' ref='stylesheet'/>

   
    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
        }

        html, body {
            margin: 0;
            padding: 0;
        }
		
		  *{
            margin:0;
            padding:0;
        }
        body,html{
            height:100%;
        }
        #container,#map,#deck-layer{
            height:100%;
        }
        
	
</style>
</header>
<body>
<style>
    #features {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 300px;
        overflow: auto;
        background: rgba(255, 255, 255, 0.8);
    }
    #map canvas {
        cursor: crosshair;
    }
</style>
<div id='map'></div>
<pre id='features'></pre>

 

<script>
  
 
minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
minemap.solution = '4013';

var myjson = {}

const map = new minemap.Map({
    container: 'map',
    style: 'http://minedata.cn/service/solu/style/id/4013',
    center: [118.8386378, 37.0313616],
    zoom: 10,
    bearing: 0,
    pitch: 45,
});


map.on('load', function () {
	
	 

    map.addLayer({
        "id": "points",
        "type": "circle",
        "source": {
            "type": "vector",
            "tiles": ["http://localhost:8004/test/pbf/{z}/{x}/{y}"]
        },
        "source-layer": "position",
        "paint": {
            "circle-radius":1,
            "circle-color":[
                            "match",
                            ["get","id"],
                            1,"#fbb03b",
                            2,"#223b53",
                            3,"#e55e5e",
                            4,"#3bb2d0",
                            "#ccc"
                            ]
        }
    });
});

map.on('mousemove', function (e) {
    var features = map.queryRenderedFeatures(e.point);
    document.getElementById('features').innerHTML = JSON.stringify(features, null, 2);
});
 
</script>   
</body>
</html>